<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>register</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .head {
            width: 100%;
            height:290px;
            background: url("cat.png") no-repeat;
            position: relative;
        }
        .head .pic {
            position: fixed;
            align-items: center;
            margin-top: 12px;
        }
        .head .head-reg {
            text-align: center;
            line-height: 50px;
            color: #fff;
            font-size:22px;
        }
        .head .title{
            color: #fff;
            font-family:方正卡通简体;
            font-size: 26px;
            margin-top:30%;
            text-align: center;
        }
       .country{
            position: absolute;
            right:16%;
            top:12% ;
            color:#FDD943 ;
           font-size:20px;
        }
        .middle {
            width: 92%;
            height:360px;
            margin: 0 auto;
            border-radius:10px;
            box-shadow: 8px 8px 20px  #E3E3E3;
            background:#fff;
            position: absolute;
            left:4%;
            top:37%;
        }
        input{
            border: none;
        }
        .middle .inputdiv {
            text-align: center;
            margin-top: 16px;
            position: relative;
        }
        .middle .number1 {
            width:70%;
            line-height: 40px;
            border-bottom:1px  solid #f2f2f2;
            outline: medium;
            font-size: 18px;
        }
        .middle .number2{
            width:50%;
            line-height: 40px;
            outline: medium;
            float: left;
            font-size: 18px;
        }
        .middle .number3 {
            line-height: 40px;
            width:42%;
            color:#FDD943;
            background: none;
            outline: medium;
            float: right;
            font-size: 18px;
        }
        .middle .number {
            width: 70%;
            height: 40px;
            outline: medium;
            border-bottom:1px  solid #f2f2f2;
            font-size: 18px;
        }
        .middle .line{
            margin: 0 auto;
            width: 70%;
            border-bottom: 1px solid #f2f2f2;
        }
        .middle .fl:after{
            clear: both;
            content: "";
            display: table;
        }
        .middle .reg_btn{
            width: 70%;
            height: 40px;
            background: #FDD943;
            border-radius: 5px;
            line-height: 40px;
            color: #fff;
            font-size:20px;
            text-align: center;
            border: none;
            margin-top:20px;
            outline: medium;
        }
        .middle .agree{
             margin-top:10px;
            font-size: 14px;
            color: grey;
        }
        .middle .agree a{
            color:cornflowerblue;
            text-decoration: none;
        }
        .middle p{
            font-size:10px;
            color: grey;
        }
      </style>

</head>
<body>
<header class="head">
    <div class="pic">
        <a href="#"><img src="返回.png" width="30"/></a>
    </div>
    <div class="head-reg">注册</div>
    <div class="title">欢迎来到萌窝</div>
</header>
<section class="middle">
    <div class="inputdiv">
            <span id="sl" onclick="toSelectCountry()" class="country">+86</span>
            <input id="phone" placeholder="请输入手机号" onblur="check_phone()"  class="number1"/>
            <p id="phone_info"></p>
    </div>
    <div class="inputdiv ">
        <div class="line fl">
            <input id="yzm" placeholder="请输入验证码" onblur="check_yzm()" class="number2 fl " />
            <input id="yzm_btn" onclick="getYZM()" value="获取验证码" type="button" class="number3 fl "/>
            <p id="yzm_info"></p>
        </div>
    </div>
    <div class="inputdiv fl">
        <input onblur="check_mima()" placeholder="密码" id="mima" class="number"/>
        <p id="mima_info"></p>
    </div>
    <div class="inputdiv">
        <input onblur="check_mima2()" placeholder="确认密码" id="mima2" class="number"/>
        <p id="mima2_info"></p>
    </div>
    <div class="inputdiv">
        <input onclick="reg()"  class="reg_btn" value="注册" type="button"/>
        <div class="agree">注册代表您同意《<a href="#">用户协议</a>》</div>
    </div>

</section>
<script type="text/javascript" src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>
<script src="reg.js"></script>
</body>
</html>